<template>
  <div>
    <ul>
      <li
        v-for="(item, index) in arr"
        :key="index"
        :class="{ active: index === 0 }"
      >
        {{ item }} ---- {{ index }}
      </li>
    </ul>
    <ul>
      <li
        @click="btn(index)"
        v-for="(item, index) in arr"
        :key="index"
        :class="{ active: index === x }"
      >
        {{ item }} ---- {{ index }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      x: "",
      arr: ["老八", "波澜哥", "催逝员"],
    };
  },
  methods: {
    btn(index) {
      console.log(index);
      this.x=index
    },
  },
};
</script>

<style>
.active {
  color: red;
}
</style>